<template>
    <div class='list' ref='warpper'>
        <div>
            <div class="area">
                <div class="title">当前城市 </div>
                <div class="button-list">
                <div class="button-warpper">
                        <div class="button">{{this.currentCity}}</div>
                </div>
                </div>
            </div>
            <div class="area">
                <div class="title">热门城市 </div>
                <div class="button-list">
                    <template v-for='item of hotCitys'>
                        <div class="button-warpper" :key='item.id'
                          @click='handleChangeCity(item.name)'
                        >
                            <div class="button">{{item.name}}</div>
                        </div>
                    </template>
              </div>
            </div>
            <template v-for='(item,key) of citys' >
                <div class="area"  :key='key' :ref='key'>
                    <div class="title"> {{key}} </div>
                    <ul class='area-list' v-for='innerItem of item' :key='innerItem.id'>
                        <li class='area-li'  @click='handleChangeCity(innerItem.name)'>{{innerItem.name}}</li>
                    </ul>
                </div>
            </template>
        </div>
    </div>
</template>

<script>
import BScroll from 'better-scroll'
import { mapState, mapMutations } from 'vuex'
export default{
    name:'CityList',
    props: {
        hotCitys:Array,
        citys:Object,
        letter:String
    },
    computed:{
      ...mapState({
        currentCity : 'city'
      })
    },
    //点击热门城市按钮，dispatch 派发一个 叫changeCity 的事件 把city传过去
    // 第一种写法是组件 vue Compontents 通过dispatch 调用 action 再调用 mutations
    // 但是这里我们可以通过组件直接使用 commit 调用 mutations
    methods: {
        handleChangeCity (city) {
            // this.$store.dispatch ('changeCity',city)
           //  然后直接把city传进这个方法里面
            this.changeCity(city)
             this.$router.push('/')
        },
        //意思是我们有一个mutation叫做changeCity 。然后我们mutation 映射到这个组件里面一个叫做changeCity 的方法里
        ...mapMutations(['changeCity'])
    },
    //下拉滚动
    mounted () {
        this.scroll = new BScroll(this.$refs.warpper,{
          click: true
        })
    },
    watch: {
        letter () {
            if(this.letter){
                 //点击当前的字母，自动跳转到字母所对应的的地域模块
                const element = this.$refs[this.letter][0];
                this.scroll.scrollToElement(element)
            }
        }
    }
}
</script>

<style lang="stylus" scoped>
@import '~@styles/varibles.styl';
.list
 overflow hidden
 position absolute
 top 1.78rem
 bottom 0
 left 0
 right 0

.area
 height auto

.title
 line-height .5rem
 background #eeeeee
 padding-left 0.2rem
 font-size .26rem
 text-align left
 border-bottom .01rem solid #1012

.button-list
 overflow hidden
 padding  .1rem .6rem .1rem .1rem

.button-warpper
 float left
 width:33%

.button
 margin .1rem
 padding .1rem 0
 text-align center
 border .02rem  solid #cccccc
 border-radius .06rem
 line-height .5rem

.area-li
  line-height .76rem!important
  padding-left .2rem!important
  line-height .76rem
  border-bottom .01rem solid #1012
  text-align left

</style>
